<template>
<div>
    <!--搜索栏-->
    <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
            <el-select v-model="formInline.billType" placeholder="请选择类型">
                <el-option v-for="item in billTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="搜索：">
            <el-date-picker v-model="formInline.billTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
        </el-form-item>
        <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="exportExcel">导出</el-button>
        </el-form-item>
    </el-form>

    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column  align="center"  sortable prop="billTime" label="时间"></el-table-column>
        <el-table-column  align="center"  sortable prop="billType" :formatter="formatBillType" label="类别"></el-table-column>
        <el-table-column  align="center"  sortable prop="userName" label="姓名"></el-table-column>
        <el-table-column  align="center"  sortable prop="remark" label="备注"></el-table-column>
        <el-table-column  align="center"  sortable prop="money" label="资金"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
</div>
</template>

<script>
import * as api from '../../api/interface'
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            loading: false, //是显示加载
            //查询条件
            formInline: {
                page: 1, //当前页面
                limit: 10, //每页数量
                billType: '',
                billTime: null,
            },
            listData: [], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            },
            billTypes: [
                { value: "", label: "请选择" },
                { value: "1", label: "销售" },
                { value: "2", label: "采购" },
                { value: "3", label: "发工资" }
            ],
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    /**
     * 页面初始化方法
     */
    created() {
        this.getData()
    },
    methods: {
        formatBillType: function (row, column) {
            return row.billType == '1' ? "销售" :
                row.billType == "2" ? "采购" :
                row.billType == "3" ? "发工资" :
                "未知";
        },
        // 获取列表数据
        getData() {
            this.loading = true
            let para = {
                current: this.formInline.page,
                size: this.formInline.limit,
                billType: this.formInline.billType //按照账单类型查询
            }
            if (this.formInline.billTime) {
                para.startTime = this.formInline.billTime[0];
                para.endTime = this.formInline.billTime[1];
            }
            api.billExport(para).then(data => {
                this.logining = false;
                if (data.message != "success") {
                    this.logining = false;
                    this.$message.error(data.message)
                } else {
                    this.loading = false
                    this.listData = data.returnPage.records
                    this.pageparm.currentPage = data.returnPage.current
                    this.pageparm.pageSize = data.returnPage.size
                    this.pageparm.total = data.returnPage.total
                }
            }).catch(e => {
                this.logining = false;
            });
        },
      exportExcel: function () {
        require.ensure([], () => {
          const {
            export_json_to_excel
          } = require('../../assets/js/Export2Excel');
          const tHeader = ['时间', '类别', '姓名', '备注', '资金']; //对应表格输出的title
          const filterVal = ['billTime', 'billType', 'userName', 'remark', 'money']; // 对应表格输出的数据

          let para = {
            current: 1,
            size: 9999999,
            billType: this.formInline.billType
          }
          if (this.formInline.billTime) {
            para.startTime = this.formInline.billTime[0];
            para.endTime = this.formInline.billTime[1];
          }
          api.billExport(para).then(data => {
            let dataList = data.returnPage.records;
            let type1 = 0;
            let type2 = 0;
            let type3 = 0;
            data.returnPage.records.forEach(item => {
              if (item.billType == '1') {
                type1 += parseFloat(item.money);
              } else if (item.billType == '2') {
                type2 += parseFloat(item.money);
              } else if (item.billType == '3') {
                type3 += parseFloat(item.money);
              }
            })
            dataList.push({ billTime: "总金额", billType: "1", userName: "-", remark: "-", money: type1 })
            dataList.push({ billTime: "总金额", billType: "2", userName: "-", remark: "-", money: type2 })
            dataList.push({ billTime: "总金额", billType: "3", userName: "-", remark: "-", money: type3 })
            const exceldata = this.formatJson(filterVal, dataList)
            export_json_to_excel(tHeader, exceldata, '账单导出')
          }).catch(e => {
            console.log(e);
          });
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => j == 'billType' ? (v[j] == '1' ? "销售" : v[j] == "2" ? "采购" : v[j] == "3" ? "发工资" : "未知") : v[j]))
      },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getData()
        },
        //显示添加界面
        handleAdd: function (index, row) {
            this.editFormVisible = true
            this.title = '新增'
            this.editForm = {}
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true
            this.title = '编辑'
            this.editForm = row
        },
        // 关闭编辑
        closeDialog() {
            this.editFormVisible = false
        },
        // 编辑、增加页面保存方法
        submitForm(editData) {
            this.$refs[editData].validate(valid => {
                if (valid) {
                    let para = Object.assign({}, this.editForm);
                    this.loading = true;
                    api.updateSaleLog(para)
                        .then(res => {
                            this.loading = false;
                            if (res.message == 'success') {
                                this.$message({ message: "提交成功", type: "success" });
                                this.getData();
                                this.editFormVisible = false;
                            } else {
                                this.$message({ type: 'error', message: res.message })
                            }
                        })
                        .catch(e => {
                            // this.editFormVisible = false
                            this.loading = false
                        })
                } else {
                    return false
                }
            })
        },
        // 删除
        handleDel(index, row) {
            this.$confirm('确定要删除吗?', '信息', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
                .then(() => {
                    let para = {
                        userId: row.userId
                    }
                    api.delSaleLog(para)
                        .then(res => {
                            if (res.message == 'success') {
                                this.$message({ message: "删除成功", type: "success" });
                                this.getData();
                            } else {
                                this.$message({ type: 'error', message: res.message })
                            }
                        })
                        .catch(e => {
                            this.loading = false
                        })
                });
        },

    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}
</style>
